<template>
    <div class="big-box">
        <div class="box">
            <div class="input">
            <span>
              <van-cell-group inset class="input-one">
                <van-field v-model="sear" style="width: 7rem;margin-top: -0.13rem;" center clearable left-icon="search"
                  placeholder="请输入搜索内容">
                  <template #button>
                    <van-button class="btn" @click="sou" size="small">搜索</van-button>
                  </template>
                </van-field>
              </van-cell-group>
            </span>
          </div>
          <div class="hotsort">
            <span><b>热门搜索</b></span>
            <div class="hotsort-one">
                <div><span style="background: #ff3c09;">1</span>中国人民解放军第二五四医院 <van-icon name="fire" color="red"/></div>
                <div><span style="background: #ff5a00;">2</span>河北医科大学第三医院(西区) <van-icon name="fire" color="red"/></div>
                <div><span style="background: #ffac02;">3</span>宁城县蒙医中医医院 <van-icon name="fire" color="red"/></div>
                <div><span>4</span>内蒙古医科大学附属人民医院</div>
                <div><span>5</span>内蒙古自治区人民医院</div>
                <div><span>6</span>长沙珂信肿瘤医院</div>
                <div><span>7</span>苏州肤康皮肤病医院</div>
                <div><span>8</span>广州中医药大学金沙洲医院</div>
            </div>
          </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
let sear = ''
const sou = ()=>{
  console.log(sear,"sear.value");
  router.push({path:'/search',query:sear})
}

</script>
<style scoped>
* {
    font-size: 0.3rem;
}

.big-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0 0 0;
}

.box {
    width: 95%;

}
.input {
    width: 90%;
    height: 50%;
    display: flex;
    align-items: center;
    .input-one {
      width: 100%;
      height: 0.7rem;
      line-height: 0.7rem;
      margin: 0;
      border-radius: 2rem;
      border: 1px solid #00be8c;
    }

    .btn {
      border: none;
      border-left: 1px solid #dddddd;
      color: #00be8c;
    }
  }
  .hotsort{
    width: 100%;
    height: 8rem;
    margin-top: 0.3rem;
  }
  .hotsort-one{
    width: 100%;
    height: 8rem;
    div{
      width: 100%;
      height: 1rem;
      float: left;
      line-height: 1rem;
      border-bottom: 1px solid #eeeeee;
      span{
        display: block;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 0.1rem;
        background: #cfa488;
        color: #ffffff;
        text-align: center;
        line-height: 0.3rem;
        float: left;
        font-size: 0.2rem;
        margin: 0.3rem 0.2rem 0 0
      }
    }
  }
</style>